﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/jquery.js"></script>
<script language="JavaScript" src="js/vue.min.js"></script>
<script language="JavaScript" src="js/axios.min.js"></script>

<script type="text/javascript">

function changetitle(){
    var $ul = $(this).next('ul');
    $('dd').find('ul').slideUp();
    if($ul.is(':visible')){
        $(this).next('ul').slideUp();
    }else{
        $(this).next('ul').slideDown();
    }
}
</script>
<style type="text/css">
	#containerDiv{width: 1200px; margin: auto;}
	#headDiv{height: 88px;background:url(images/topbg.gif) repeat-x;}
	#leftDiv,#rightDiv{float: left;}
	#leftDiv{width: 190px;height: 700px; overflow: hidden;}
	#rightDiv{width: 834px;}
</style>
<title>网站后台管理系统HTML模板--模板之家 www.cssmoban.com</title>
</head>
 
<body >
<div id="main_body">
	 <div id="containerDiv">
	 	<div id="headDiv">
	   <div class="topleft">
    <a href="main.html" target="_parent"><img src="images/logo.png" title="系统首页" /></a>
    </div>
        
    <ul class="nav">
    <li><a href="default.html" target="rightFrame" class="selected"><img src="images/icon01.png" title="工作台" /><h2>工作台</h2></a></li>
    <li><a href="imgtable.html" target="rightFrame"><img src="images/icon02.png" title="模型管理" /><h2>模型管理</h2></a></li>
    <li><a href="imglist.html"  target="rightFrame"><img src="images/icon03.png" title="模块设计" /><h2>模块设计</h2></a></li>
    <li><a href="tools.html"  target="rightFrame"><img src="images/icon04.png" title="常用工具" /><h2>常用工具</h2></a></li>
    <li><a href="computer.html" target="rightFrame"><img src="images/icon05.png" title="文件管理" /><h2>文件管理</h2></a></li>
    <li><a href="tab.html"  target="rightFrame"><img src="images/icon06.png" title="系统设置" /><h2>系统设置</h2></a></li>
    </ul>
            
    <div class="topright">    
    <ul>
    <li><span><img src="images/help.png" title="帮助"  class="helpimg"/></span><a href="#">帮助</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="login.html" target="_parent">退出</a></li>
    </ul>
     
    <div class="user">
        <span v-if="admin!=null">{{admin.aname}}[<span v-for="roles in rolesList">{{roles.rolename}}</span>]</span>
    <i>消息</i>
    <b>5</b>
    </div>    
    
    </div> 		
	 	</div>
	 	<div id="bodyDiv">
	 		<div id="leftDiv">
	 			<div class="lefttop"><span></span>通讯录</div>
    
    <dl class="leftmenu">
        
    <dd>
    <div class="title">
    <span><img src="images/leftico01.png" /></span>管理信息
    </div>
    	<ul class="menuson">
        <li><cite></cite><a href="index.html" target="rightFrame">首页模版</a><i></i></li>
        <li class="active"><cite></cite><a href="right.html" target="rightFrame">数据列表</a><i></i></li>
        <li><cite></cite><a href="imgtable.html" target="rightFrame">图片数据表</a><i></i></li>
        <li><cite></cite><a href="form.html" target="rightFrame">添加编辑</a><i></i></li>
        <li><cite></cite><a href="imglist.html" target="rightFrame">图片列表</a><i></i></li>
        <li><cite></cite><a href="imglist1.html" target="rightFrame">自定义</a><i></i></li>
        <li><cite></cite><a href="tools.html" target="rightFrame">常用工具</a><i></i></li>
        <li><cite></cite><a href="filelist.html" target="rightFrame">信息管理</a><i></i></li>
        <li><cite></cite><a href="tab.html" target="rightFrame">Tab页</a><i></i></li>
        <li><cite></cite><a href="error.html" target="rightFrame">404页面</a><i></i></li>
        </ul>    
    </dd>
        
    
    <dd v-for="first in firstMenu">
    <div class="title" >
    <span><img src="images/leftico02.png" /></span>{{first.pername}}
    </div>
    <ul class="menuson" >
        <li v-for="two in twoMenu[first.id]"><cite></cite>
            <a v-bind:href="two.url" target="rightFrame">{{two.pername}}</a>
            <i></i></li>
        </ul>
    </dd>

    
    </dl>
	 		</div>
	 		<div id="rightDiv">
	 			<iframe  src="/default.html" name="rightFrame" frameborder="0" width="1010" scrolling="no" height="700"  ></iframe>
	 		</div>
	 	</div>
	 </div>
</div>
</body>
<script>


    var vm = new Vue({
        el:"#main_body",

        data:{
            admin:null,
            rolesList:[],
            firstMenu:[],
            twoMenu:null
        },
        created(){
            this.getMenu()
        },
        methods:{
            getMenu:function () {
                axios.get("/main",null).then(function (obj) {
                    if(obj.status==200){
                        var pageResult = obj.data;
                        if(pageResult.object!=null){
                            vm.admin=pageResult.object.admin;
                            vm.rolesList=pageResult.object.rolesList;
                            vm.firstMenu=pageResult.object.firstMenu;
                            vm.twoMenu=pageResult.object.twoMenu;
                        }else {
                            alert(pageResult.msg);
                            location.href="/login.html";
                        }
                    }
                }).catch(function (obj) {

                });
            }
        }
    });

    $(function(){
        //导航切换
        $(".menuson li").click(function(){
            $(".menuson li.active").removeClass("active")
            $(this).addClass("active");
        });

        $('.title').click(function(){
            var $ul = $(this).next('ul');
            $('dd').find('ul').slideUp();
            if($ul.is(':visible')){
                $(this).next('ul').slideUp();
            }else{
                $(this).next('ul').slideDown();
            }
        });


        //顶部导航切换
        $(".nav li a").click(function(){
            $(".nav li a.selected").removeClass("selected")
            $(this).addClass("selected");
        });

    })
</script>
</html>
